import React, { useState } from 'react';
import { Modal, Rate, Input, message } from 'antd';

export default function FeedbackModal({ open, onClose }) {
  const [rating, setRating] = useState(0);
  const [comment, setComment] = useState('');
  const [submitting, setSubmitting] = useState(false);

  const handleSubmit = async () => {
    if (rating === 0) {
      message.warning('请先选择评分');
      return;
    }

    setSubmitting(true);
    try {
      // 模拟提交逻辑，你可以改为调用 API
      await new Promise(resolve => setTimeout(resolve, 1000));

      console.log('提交内容：', { rating, comment });
      message.success('感谢你的反馈！');
      onClose();
      setRating(0);
      setComment('');
    } catch (error) {
      message.error('提交失败，请稍后再试');
    }
    setSubmitting(false);
  };

  const handleCancel = () => {
    setRating(0);
    setComment('');
    onClose();
  };

  return (
    <Modal
      title="反馈建议"
      open={open}
      onCancel={handleCancel}
      onOk={handleSubmit}
      confirmLoading={submitting}
      okText="提交"
      cancelText="取消"
    >
      <div style={{ marginBottom: 16 }}>
        <div style={{ marginBottom: 8 }}>评分：</div>
        <Rate onChange={setRating} value={rating} />
      </div>

      <div>
        <div style={{ marginBottom: 8 }}>评语：</div>
        <Input.TextArea
          rows={4}
          maxLength={200}
          placeholder="写下你的建议或想法..."
          value={comment}
          onChange={(e) => setComment(e.target.value)}
          showCount
        />
      </div>
    </Modal>
  );
}
